<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面-vue版本</title>


</head>
<body>
<div id="app">


    <div class="login-box">

        <div>
            用户名: <input type="text" v-model="user.username">
        </div>
        <div>
            密码：<input type="password" v-model="user.password">
        </div>
<!--        <div>-->
<!--            {{err}}-->
<!--        </div>-->

         <div v-show="isErr">
             用户名或者密码错误
         </div>
        <div>
            <button @click="btnLoginClick">登录</button>
        </div>

    </div>


</div>

</body>
<script src="../../lib/vue.global.js"></script>
<script src="../mock/user.js"></script>
<script>

    /**
     * 数据驱动
     * */

    var app = Vue.createApp({
        data: function () {
            return {
                user: {
                    username: '',
                    password: '',
                    roles: [],
                }, isErr:false
            }
        }, methods: {
            //btnLoginHandle
            btnLoginClick: function () {

                if (this.user.username == user.username && this.user.password == user.password) {
                    location.href = 'index.html';
                } else {
                     //this.err='用户名或者密码错误';
                    this.isErr = true;
                }

            }
        }
    })

    app.mount('#app')


</script>

</html>